<template name="connections">
    <!-- MODAL Connect-->
    <div class="modal inmodal" id="connectionModal" tabindex="-1" role="dialog" aria-hidden="true"
         style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">{{_ "close"}}</span></button>
                    <i class="fa fa-laptop modal-icon"></i>
                    <h4 class="modal-title">{{_ "connections"}}</h4>
                    <small class="font-bold">{{_ "connections_description"}}
                    </small>
                </div>
                <div class="modal-body">
                    <table id="tblConnection"
                           class="table table-striped table-bordered table-hover dataTables-example dataTable"
                           style="width: 100%">
                        <thead>
                        <tr>
                            <th>_id</th>
                            <th>{{_ "connection_name"}}</th>
                            <th>{{_ "servers"}}</th>
                            <th>{{_ "properties"}}</th>
                            <th>{{_ "edit"}}</th>
                            <th>{{_ "clone"}}</th>
                            <th>{{_ "delete"}}</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>

                    <button id="btnCreateNewConnection" type="button" class="btn btn-block btn-outline btn-primary">
                        {{_ "create_new"}}
                    </button>
                </div>
                <div class="modal-footer">
                    <div class="pull-left">
                        <button type="button" class="btn btn-white" data-dismiss="modal">{{_ "close"}}</button>
                    </div>
                    <button id="btnConnect" title="{{_ "select_connection"}}" type="button" disabled="true"
                            class="btn btn-primary ladda-button" data-style="contract">{{_ "connect"}}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL CREATE/EDIT Connection-->
    <div class="modal inmodal" id="addEditConnectionModal" tabindex="-1" role="dialog" aria-hidden="true"
         style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">{{_ "close"}}</span></button>
                    <h4 id="addEditConnectionModalTitle" class="modal-title">{{_ "add_connection"}}</h4>
                    <small id="addEditModalSmall" class="font-bold">{{getConnection.connectionName}}
                    </small>
                </div>

                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <div class="col-lg-12"><input id="inputConnectionName"
                                                          data-required="true"
                                                          type="text"
                                                          placeholder="{{_ "connection_name"}} ({{_ "optional"}})"
                                                          class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-12"><input id="inputUrl"
                                                          data-required="true"
                                                          type="text"
                                                          placeholder="{{_ "connection_url"}}"
                                                          class="form-control">
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <!--TABS CONTAINER-->
                        <div class="tabs-container">
                            <ul class="nav nav-tabs">
                                <li class="active"><a data-toggle="tab" href="#tab-1-connection"
                                                      aria-expanded="true">
                                    {{_ "connection"}}</a>
                                </li>
                                <li class=""><a data-toggle="tab" href="#tab-2-authentication"
                                                aria-expanded="false">{{_ "authentication"}}</a>
                                </li>
                                <li class=""><a id="anchorConnectionSsl" data-toggle="tab" href="#tab-3-ssl"
                                                aria-expanded="false">{{_ "ssl"}}</a>
                                </li>
                                <li class=""><a data-toggle="tab" href="#tab-4-ssh"
                                                aria-expanded="false">{{_ "ssh"}}</a>
                                </li>
                                <li class=""><a data-toggle="tab" href="#tab-5-connection-options"
                                                aria-expanded="false">{{_ "options"}}</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <!-- TAB 1 -->
                                <div id="tab-1-connection" class="tab-pane active">
                                    <div class="panel-body no-borders modal-background">
                                        {{>serverTemplate}}
                                    </div>
                                </div>

                                <!-- TAB 2-->
                                <div id="tab-2-authentication" class="tab-pane">
                                    <div class="panel-body no-borders modal-background">

                                        <!--Authentication Type-->
                                        <form class="form-horizontal">
                                            <div class="form-group">
                                                <label class="col-lg-2 control-label">{{_ "auth_type"}}
                                                </label>
                                                <div data-placement="top"
                                                     data-toggle="tooltip" class="col-lg-10">
                                                    <select id="cmbAuthenticationType"
                                                            data-placeholder="{{_ "leave_empty_for_no_auth"}}"
                                                            class="chosen-select form-control"
                                                            tabindex="-1">
                                                        <option></option>
                                                        <option value="scram_sha_1">{{_ "scram_sha_1"}}</option>
                                                        <option value="scram_sha_256">{{_ "scram_sha_256"}}</option>
                                                        <option value="mongodb_cr">{{_ "mongodb_cr"}}</option>
                                                        <option value="mongodb_x509">{{_ "x509"}}</option>
                                                        <option value="gssapi">{{_ "kerberos"}}</option>
                                                        <option value="plain">{{_ "ldap"}}</option>
                                                    </select>
                                                    <span class="help-block m-b-none">{{{_ "auth_warning"}}}</span>
                                                </div>
                                            </div>
                                        </form>

                                        <div class="hr-line-dashed"></div>

                                        <!--MONGODB-CR/SCRAM-SHA-1/SCRAM-SHA-256 Form-->
                                        {{#if authenticationMethod "scram_sha_256" "scram_sha_1" "mongodb_cr"}}
                                            {{> basicAuthTemplate}}
                                        {{/if}}

                                        <!--X509 Form-->
                                        {{#if authenticationMethod "mongodb_x509"}}
                                            <form class="form-horizontal">
                                                <div class="form-group"><label
                                                        class="col-lg-2 control-label">{{_ "username"}}</label>
                                                    <div data-placement="top"
                                                         data-toggle="tooltip" class="col-lg-10"><input
                                                            id="inputX509Username"
                                                            data-required="true"
                                                            type="text"
                                                            placeholder="{{_ "subject_from_certificate"}}"
                                                            class="form-control">
                                                    </div>
                                                </div>
                                            </form>
                                            {{> sslTemplate}}
                                        {{/if}}

                                        <!--Kerberos Form-->
                                        {{#if authenticationMethod "gssapi"}}
                                            {{> kerberosTemplate}}
                                        {{/if}}

                                        <!--LDAP Form-->
                                        {{#if authenticationMethod "plain"}}
                                            {{> ldapTemplate}}
                                        {{/if}}
                                    </div>
                                </div>

                                <!-- TAB 3-->
                                <div id="tab-3-ssl" class="tab-pane">
                                    <div class="panel-body no-borders modal-background">
                                        <form id="formSSL" class="form-horizontal">
                                            <div class="form-group"><label class="col-lg-2 control-label">{{_ "use_ssl"}}</label>
                                                <div data-placement="top"
                                                     data-toggle="tooltip" id="divUseSSL" class="col-lg-10">
                                                    <input id="inputUseSSL" type="checkbox"
                                                           class="form-control"
                                                           checked=""
                                                           style="position: absolute; opacity: 0;"/>
                                                    <span id="spanUseSSL" style="display: none;"
                                                          class="help-block m-b-none">{{{_ "clear_url_to_activate"}}}</span>
                                                </div>
                                            </div>

                                            <div class="hr-line-dashed"></div>

                                            <div id="divSslTemplate">
                                                {{> sslTemplate}}
                                            </div>
                                        </form>
                                    </div>
                                </div>

                                <!-- TAB 4-->
                                <div id="tab-4-ssh" class="tab-pane">
                                    <div class="panel-body no-borders modal-background">
                                        <div class="form-group"><label class="col-lg-2 control-label">{{_ "use_ssh"}}</label>
                                            <div id="divUseSSH" class="col-lg-10">
                                                <input id="inputUseSSH" type="checkbox"
                                                       class="form-control"
                                                       checked=""
                                                       style="position: absolute; opacity: 0;"/>
                                            </div>
                                        </div>

                                        <div class="hr-line-dashed"></div>

                                        <div id="divSshTemplate">
                                            {{> sshTemplate}}
                                        </div>
                                    </div>
                                </div>

                                <!-- TAB 5-->
                                <div id="tab-5-connection-options" class="tab-pane">
                                    <div class="panel-body no-borders modal-background">
                                        {{> connectionOptions}}
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!--END OF TABS CONTAINER-->
                    </form>

                </div>

                <div class="modal-footer">
                    <div class="pull-left">
                        <button type="button" class="btn btn-white" data-dismiss="modal">{{_ "close"}}</button>
                    </div>
                    <button id="btnSaveConnection" type="button" class="btn btn-primary ladda-button"
                            data-style="contract">{{_ "save"}}
                    </button>
                </div>
            </div>

        </div>
    </div>

    <!-- MODAL Prompt Username & Password-->
    <div class="modal inmodal" id="promptUsernamePasswordModal" tabindex="-1" role="dialog" aria-hidden="true"
         style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">{{_ "close"}}</span></button>
                    <i class="fa fa-key modal-icon"></i>
                    <h4 class="modal-title">{{_ "credentials"}}</h4>
                    <small class="font-bold">{{_ "credentials_prompt"}}
                    </small>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <div class="col-lg-12">
                                <input id="inputPromptedUsername"
                                       data-required="true"
                                       type="text"
                                       placeholder="{{_ "username"}}"
                                       class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div data-placement="top"
                                 data-toggle="tooltip" class="col-lg-12">
                                <div class="input-group"><input id="inputPromptedPassword" type="password"
                                                                placeholder="{{_ "password"}}"
                                                                class="form-control">
                                    <span class="input-group-btn"> <button type="button" class="btn btn-white showpass"><span
                                            class="glyphicon glyphicon-eye-open"></span>
                                        </button> </span></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="pull-left">
                        <button type="button" class="btn btn-white" data-dismiss="modal">{{_ "close"}}</button>
                    </div>
                    <button id="btnProceedConnecting" title="{{_ "connect"}}" type="button"
                            class="btn btn-primary ladda-button" data-style="contract">{{_ "connect"}}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL Colorize Connection -->
    <div id="colorizeModal" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12"><h3 class="m-t-none m-b">{{_ "choose_color"}}</h3>
                            <form role="form">
                                <input id="inputColor" type="text" class="color-element form-control" value="">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="pull-left">
                        <button type="button" class="btn btn-white" data-dismiss="modal">{{_ "close"}}</button>
                    </div>
                    <button id="btnSaveColor" title="{{_ "save"}}" type="button"
                            class="btn btn-primary ladda-button" data-style="contract">{{_ "save"}}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<template name="kerberosTemplate">
    <form class="form-horizontal">
        <div class="form-group"><label
                class="col-lg-2 control-label">{{_ "username"}}</label>
            <div data-placement="top"
                 data-toggle="tooltip" class="col-lg-10"><input id="inputKerberosUsername"
                                                                data-required="true"
                                                                type="text"
                                                                placeholder="{{_ "username"}}"
                                                                class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-2 control-label">{{_ "password"}}</label>
            <div class="col-lg-10">
                <div data-placement="top"
                     data-toggle="tooltip" class="input-group">
                    <input id="inputKerberosPassword" type="password"
                           placeholder="{{_ "password"}} ({{_ "optional"}})"
                           class="form-control">
                    <span class="input-group-btn"> <button type="button" class="btn btn-white showpass"><span
                            class="glyphicon glyphicon-eye-open"></span>
                                        </button> </span>
                </div>
            </div>
        </div>

        <div class="hr-line-dashed"></div>

        <div class="form-group"><label
                class="col-lg-2 control-label">{{_ "service_name"}}</label>
            <div data-placement="top"
                 data-toggle="tooltip" class="col-lg-10"><input id="inputKerberosServiceName"
                                                                data-required="true"
                                                                type="text"
                                                                value="mongodb"
                                                                placeholder="{{_ "service_name"}}"
                                                                class="form-control">
            </div>
        </div>
    </form>
</template>

<template name="ldapTemplate">
    <form class="form-horizontal">
        <div class="form-group"><label
                class="col-lg-2 control-label">{{_ "username"}}</label>
            <div data-placement="top"
                 data-toggle="tooltip" class="col-lg-10"><input id="inputLdapUsername"
                                                                data-required="true"
                                                                type="text"
                                                                placeholder="{{_ "username"}}"
                                                                class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-2 control-label">{{_ "password"}}</label>
            <div data-placement="top"
                 data-toggle="tooltip" class="col-lg-10">
                <div class="input-group"><input id="inputLdapPassword" type="password"
                                                placeholder="{{_ "password"}}"
                                                class="form-control">
                    <span class="input-group-btn"> <button type="button" class="btn btn-white showpass"><span
                            class="glyphicon glyphicon-eye-open"></span>
                                        </button> </span>
                </div>
            </div>
        </div>
    </form>
</template>

<template name="connectionOptions">
    <div class="form-group"><label class="col-lg-2 control-label">{{_ "conn_timeout"}}</label>
        <div data-placement="top"
             data-toggle="tooltip" class="col-lg-10">
            <div class="input-group m-b">
                <input id="inputConnectionTimeoutOverride"
                       data-required="true"
                       min="1"
                       type="number"
                       placeholder="{{_ "conn_timeout"}}"
                       class="form-control">
                <span class="input-group-addon"> {{_ "seconds"}}</span>
            </div>
            <span class="help-block m-b-none">{{{_ "override_conn_timeout_info"}}}</span>
        </div>
    </div>

    <div class="form-group"><label class="col-lg-2 control-label">{{_ "socket_timeout"}}</label>
        <div data-placement="top"
             data-toggle="tooltip" class="col-lg-10">
            <div class="input-group m-b">
                <input id="inputSocketTimeoutOverride"
                       data-required="true"
                       min="1"
                       type="number"
                       placeholder="{{_ "socket_timeout"}}"
                       class="form-control">
                <span class="input-group-addon"> {{_ "seconds"}}</span>
            </div>
            <span class="help-block m-b-none">{{{_ "override_socket_timeout_info"}}}</span>
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="form-group"><label class="col-lg-2 control-label">{{_ "replica_name"}}</label>
        <div data-placement="top"
             data-toggle="tooltip" class="col-lg-10">
            <input id="inputReplicaSetName"
                   data-required="true"
                   min="1"
                   type="text"
                   placeholder="{{_ "replica_name"}}"
                   class="form-control">
            <span class="help-block m-b-none">{{{_ "replica_field_info"}}}</span>
        </div>
    </div>

    <!--Read Preference-->
    <div class="form-group">
        <label class="col-lg-2 control-label">{{_ "read_preference"}}</label>
        <div data-placement="top"
             data-toggle="tooltip" class="col-lg-10">
            <select id="cmbReadPreference"
                    data-placeholder="{{_ "read_preference"}}"
                    class="chosen-select form-control"
                    tabindex="-1">
                <option></option>
                <option value="primary">{{_ "primary"}}</option>
                <option value="primaryPreferred">{{_ "primary_preferred"}}</option>
                <option value="secondary">{{_ "secondary"}}</option>
                <option value="secondaryPreferred">{{_ "secondary_preferred"}}</option>
                <option value="nearest">{{_ "nearest"}}</option>
            </select>
            <span class="help-block m-b-none">{{{_ "read_preference_info"}}}</span>
        </div>
    </div>

    <!--Connect with no primary-->
    <div class="form-group"><label class="col-lg-2 control-label">{{_ "connect_with_no_primary"}}</label>
        <div id="divConnectWithNoPrimary" class="col-lg-10">
            <input data-placement="top"
                   data-toggle="tooltip" id="inputConnectWithNoPrimary" type="checkbox"
                   class="form-control"
                   checked=""
                   style="position: absolute; opacity: 0;"/>
        </div>
    </div>

</template>

<template name="sshTemplate">
    <form class="form-horizontal">
        <div class="form-group"><label
                class="col-lg-2 control-label">{{_ "hostname"}}</label>
            <div class="col-lg-10"><input id="inputSshHostname"
                                          data-required="true"
                                          type="text"
                                          placeholder="{{_ "hostname"}}"
                                          class="form-control">
            </div>
        </div>
        <div class="form-group"><label class="col-lg-2 control-label">{{_ "port"}}</label>
            <div class="col-lg-10"><input id="inputSshPort"
                                          data-required="true"
                                          min="1"
                                          type="number"
                                          placeholder="{{_ "port"}}"
                                          class="form-control">
            </div>
        </div>
        <div class="form-group"><label class="col-lg-2 control-label">{{_ "destination_port"}}</label>
            <div class="col-lg-10"><input id="inputSshDestinationPort"
                                          data-required="true"
                                          min="1"
                                          type="number"
                                          placeholder="{{_ "destination_port"}}"
                                          class="form-control">
                <span class="help-block m-b-none">{{{_ "destination_port_info"}}}</span>
            </div>
        </div>
        <div class="form-group"><label class="col-lg-2 control-label">{{_ "local_port"}}</label>
            <div class="col-lg-10"><input id="inputSshLocalPort"
                                          data-required="true"
                                          min="1"
                                          type="number"
                                          placeholder="{{_ "local_port"}}"
                                          class="form-control">
                <span class="help-block m-b-none">{{{_ "local_port_info"}}}</span>
            </div>
        </div>
        <div class="form-group"><label
                class="col-lg-2 control-label">{{_ "username"}}</label>
            <div class="col-lg-10"><input id="inputSshUsername"
                                          data-required="true"
                                          type="text"
                                          placeholder="{{_ "username"}}"
                                          class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-2 control-label">{{_ "authentication"}}</label>
            <div class="col-lg-10">
                <select id="cmbSshAuthType"
                        data-placeholder="{{_ "auth_type"}}"
                        class="chosen-select form-control"
                        tabindex="-1">
                    <option></option>
                    <option value="Certificate">{{_ "certificate"}}</option>
                    <option value="Password">{{_ "password"}}</option>
                </select>
            </div>
        </div>
    </form>

    <!-- CERTIFICATE AUTH FORM FOR SSH -->
    <form id="formSshCertificateAuth" class="form-horizontal"
          style="display: none;">
        <div class="form-group">
            <label class="col-lg-2 control-label">{{_ "certificate"}} </label>
            <div class="col-lg-10">
                <input class="form-control filestyle" type="file"
                       id="inputSshCertificate"
                       data-buttonName="btn-primary">
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-2 control-label">{{_ "passphrase"}}</label>
            <div class="col-lg-10">
                <div class="input-group"><input id="inputSshPassPhrase" type="password"
                                                placeholder="{{_ "passphrase"}}"
                                                class="form-control">
                    <span class="input-group-btn"> <button type="button" class="btn btn-white showpass"><span
                            class="glyphicon glyphicon-eye-open"></span>
                                        </button> </span>
                </div>
            </div>
        </div>
    </form>

    <!-- PASSWORD AUTH FORM FOR SSH-->
    <form id="formSshPasswordAuth" class="form-horizontal" style="display: none;">
        <div class="form-group">
            <label class="col-lg-2 control-label">{{_ "password"}}</label>
            <div class="col-lg-10">
                <div class="input-group">
                    <input id="inputSshPassword" type="{{_ "password"}}"
                           placeholder="{{_ "password"}}"
                           class="form-control">
                    <span class="input-group-btn"> <button type="button" class="btn btn-white showpass"><span
                            class="glyphicon glyphicon-eye-open"></span>
                                        </button> </span>
                </div>
            </div>
        </div>
    </form>
</template>

<template name="serverTemplate">
    <form class="form-horizontal">
        <!-- Hosts to connect -->
        <div class="form-group divHostField" style="display: none">
            <label class="col-lg-2 control-label">{{_ "host_port"}}</label>
            <div class="col-lg-8">
                <div data-placement="top"
                     data-toggle="tooltip" class="input-group"><input type="text"
                                                                      placeholder="{{_ "hostname"}}"
                                                                      class="form-control txtHostName">
                    <div class="input-group-btn">
                        <button data-toggle="dropdown"
                                class="btn btn-white dropdown-toggle"
                                type="button"><span class="caret"></span></button>
                        <ul class="dropdown-menu pull-right">
                            <li><a class="addHost" href="#"><i
                                    class="fa fa-plus"></i>
                                {{_ "add_another"}}</a>
                            </li>
                            <li><a class="deleteHost" href="#"><i
                                    class="fa fa-remove"></i> {{_ "delete"}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div data-placement="top"
                 data-toggle="tooltip" class="col-lg-2"><input value="27017"
                                                               data-required="true"
                                                               min="1"
                                                               type="number"
                                                               placeholder="{{_ "port"}}"
                                                               class="form-control txtPort">
            </div>
        </div>

        <!--DB Name to connect-->
        <div class="form-group">
            <label class="col-lg-2 control-label">{{_ "db_name"}}</label>
            <div data-placement="top"
                 data-toggle="tooltip" class="col-lg-10"><input id="inputDatabaseName"
                                                                data-required="true"
                                                                type="text"
                                                                value="test"
                                                                placeholder="{{_ "db_name_placeholder"}}"
                                                                class="form-control">
                <span class="help-block m-b-none">{{{_ "db_name_info"}}}</span>
            </div>
        </div>
    </form>
</template>

<template name="basicAuthTemplate">
    <form id="formBasicAuthentication" class="form-horizontal">
        <div class="form-group">
            <label class="col-lg-2 control-label">{{_ "username"}}
            </label>
            <div data-placement="top"
                 data-toggle="tooltip" class="col-lg-10">
                <input id="inputUser" type="text"
                       placeholder="{{_ "username"}}"
                       class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-2 control-label">{{_ "password"}}
            </label>
            <div data-placement="top"
                 data-toggle="tooltip" class="col-lg-10">
                <div class="input-group"><input id="inputPassword" type="password"
                                                placeholder="{{_ "password"}}"
                                                class="form-control">
                    <span class="input-group-btn"> <button type="button" class="btn btn-white showpass"><span
                            class="glyphicon glyphicon-eye-open"></span>
                                        </button> </span></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-2 control-label">{{_ "auth_db"}}
            </label>
            <div class="col-lg-10">
                <input data-placement="top"
                       data-toggle="tooltip" id="inputAuthenticationDB" type="text"
                       placeholder="{{_ "auth_db_placeholder"}}"
                       class="form-control">
            </div>
        </div>
    </form>
</template>

<template name="sslTemplate">
    <form class="form-horizontal">
        <!-- Certificate Validation -->
        <div class="form-group">
            <label class="col-lg-2 control-label">{{_ "root_ca_file"}}
            </label>
            <div class="col-lg-10">
                <input class="form-control filestyle" type="file"
                       id="inputRootCA"
                       data-buttonName="btn-primary">
                <span class="help-block m-b-none">{{{_ "leave_empty_for_no_validation"}}}</span>
            </div>
        </div>

        <!-- Certificate -->
        <div class="form-group">
            <label class="col-lg-2 control-label">{{_ "certificate"}}
            </label>
            <div class="col-lg-10">
                <input class="form-control filestyle" type="file"
                       id="inputCertificate"
                       data-buttonName="btn-primary">
            </div>
        </div>

        <!-- Certificate Passphrase-->
        <div class="form-group"><label class="col-lg-2 control-label">{{_ "passphrase"}}
        </label>
            <div data-placement="top"
                 data-toggle="tooltip" class="col-lg-10">
                <div class="input-group">
                    <input id="inputPassPhrase" type="password"
                           placeholder="{{_ "leave_empty_for_no_passphrase"}}"
                           class="form-control">
                    <span class="input-group-btn"> <button type="button" class="btn btn-white showpass"><span
                            class="glyphicon glyphicon-eye-open"></span>
                                        </button> </span>
                </div>
            </div>
        </div>

        <!-- Certificate Key File-->
        <div class="form-group">
            <label class="col-lg-2 control-label">{{_ "certificate_key_file"}}
            </label>
            <div class="col-lg-10">
                <input class="form-control filestyle" type="file"
                       id="inputCertificateKey"
                       data-buttonName="btn-primary">
            </div>
        </div>

        <!-- Allow invalid hostnames -->
        <div class="form-group"><label class="col-lg-2 control-label">{{_ "disable_hostname_verification"}}</label>
            <div data-placement="top"
                 data-toggle="tooltip" id="divDisableHostnameVerification" class="col-lg-1">
                <input id="inputDisableHostnameVerification" type="checkbox"
                       class="form-control"
                       checked=""
                       style="position: absolute; opacity: 0;"/>
            </div>
        </div>

    </form>
</template>